<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script>
var initWidth;
var widthWithError;
$().ready(function() {
	initWidth = $(".deviceDetail").dialog("option", "width" );
	widthWithError = initWidth+100;
initValidate();
	
});
	function initValidate(){
		$.validator.setDefaults({
			submitHandler: function() { alert("submitted!"); 
		}
});
			$("#form1").validate({
		rules: {
			"guiDevice.gatewayPort": {
				required: true,
			}
		},
		messages: {
			"guiDevice.devSn": {
				required: "请输入设备标识",
			}
		},
		 showErrors: function(errorMap, errorList) {
				if(this.numberOfInvalids()>0){
					
					var currentWidth = $( ".deviceDetail" ).dialog( "option", "width" );
					if(currentWidth >= widthWithError){
						return;
					}
					$( ".deviceDetail" ).dialog( "option", "width", widthWithError );
				}
				
			    
			    this.defaultShowErrors();
			  }
	});
	}
</script>


<div class="tempDiv" >
	<form id="form1" class="hForm" name="form1" action="<s:url value="/policy/save"/>?tdqssid=<%=session.getId()%>" method="post">
			
		<s:hidden id="id" name="guiDevice.id" ></s:hidden>
		<div class="rowElem">
			<label>设备标识：</label>
			<s:textfield id="imsi" name="guiDevice.imsi" maxlength="100" cssClass="dialoginput"></s:textfield>
		</div>
		<div class="rowElem">
			<label>主叫号码：</label>
			<s:textfield id="mdn" name="guiDevice.mdn" maxlength="100" cssClass="dialoginput"></s:textfield>
		</div>
		
		<div class="rowElem">
			<label>厂商名称:</label>
			<s:textfield id="devManufac" name="guiDevice.devManufac" maxlength="100" cssClass="dialoginput"></s:textfield>
		</div>
		
		<div class="rowElem">
			<label>用户地址:</label>
			<s:textfield id="subscriberAddress" name="guiDevice.subscriberAddress" maxlength="100" cssClass="dialoginput"></s:textfield>
		</div>
		
		<table cellspacing="0" cellpadding="0" width="100%" class="listviewTable">
				<tr>
				<td class="left">
					选择域：
				</td>
				<td>
				<s:textfield readonly="true" id="company"  name="topoNames" cssClass="tree"></s:textfield>
				<s:hidden id="companyId" name="guiDevice.topoSid" ></s:hidden>
				</td>
			</tr>
		</table>
		
	</form>
</div>
<div id="topoDiv" class="dropDD_contentDiv">
	<div style="overflow:auto;height:266px">
		<ul id="featureTree" class="ztree"></ul>			
	</div>

	<div class="buttonBox" style="position:absolute;bottom:0px;background:#f3f4f4;height:30px;padding-top:4px">
		<a href="javascript:void(0);" class="button" tabindex="-1"><input type="button" onclick="window.curDDWin.saveWin();return false;" value="确认"></a>
		<a href="javascript:void(0);" class="button" tabindex="-1"><input type="button" onclick="clearCompany();return false;" value="清空"></a>
	</div>

</div>

<SCRIPT LANGUAGE="JavaScript">
var treeObject;
var selectNode;
$(document).ready(function(){
	
	var setting = {
		check: {
				enable: true
			},
					asyncParam : ["id"],
					async: {
					enable: true,
					url:"<s:url value='/topo/tree'/>",
					autoParam:["id"]
					},
					data: {
						key: {
							children: "nodes",
							name: "name",
							checked: "checked"
						}
					},
					check: {
						enable: true,
						chkStyle: "radio",
						radioType: "all"
					},
					callback : {
						onClick : zTreeOnCheck,// 点击每个节点的事件:
							
						onAsyncSuccess : function(event, treeId, treeNode, msg) {
					
							treeObject = $.fn.zTree.getZTreeObj("featureTree");
							if(!selectNode){
								return;
							}
							selectNode = treeObject.getNodeByParam("id",selectNode.id, null);
							var pNode = selectNode.getParentNode();
							treeObject.expandNode(pNode, true, false, true);
			
							
							if(treeNode!=null){
						  		if(treeNode.nodes.length==0)
						     		treeNode.isParent =false;
						   		else
						     		treeNode.isParent =true;
						 		treeObject.updateNode(treeNode, true);
						   }

						},onCheck:function(event, treeId, treeNode){
						 	var nodes=treeObject.getCheckedNodes(true);
						 	var names="";
						 	var ids="";
						 	$.each(nodes,function(i,node){
						 		if(node.checked){
						 			names=names+node.name+" "
						 			ids=ids+node.nodeIold
						 			
						 			if(i<nodes.length-1){
						 				ids=ids+","
						 			}
						 		}
						 	})
						 	$("#company").val(names);
						 	$("#companyId").val(ids);
						 }
						
					}
				};
				

			$.fn.zTree.init($("#featureTree"), setting);
				
				$("#add_button").bind('click',function(){
					selectNode = treeObject.getNodeByParam("id",selectNode.id, null);
					$('#detail_panel').load('<s:url value="/topo/edit"/>?topo.parent.id='+selectNode.id);
				})

				$("#delete_button").bind('click',function(){
					selectNode = treeObject.getNodeByParam("id",selectNode.id, null);
					$.tdqsAjax({
							type : "get",
							url : '<s:url value="/topo/delete"/>',// 目标地址
							beforeSend : function() {
							},
							complete : function() {

							},
							error : function() {

							},
							success : function(){
								selectNode = treeObject.getNodeByParam("id",selectNode.id, null);
								var pNode = selectNode.getParentNode();
								treeObject.reAsyncChildNodes(pNode, "refresh");	
								
								treeObject.selectNode(pNode);
								treeObject.expandNode(pNode, true, false, true);
								$('#detail_panel').load('<s:url value="/topo/detail"/>?id=' + pNode.id);
								
								//TODO parent icon not be changed.
							}
					});
					
				})				
				   $(window).bind("resize",function(){

	               		var width= $('#layout').width()- $('#tree_panel').width()-7;

						
					
					});
});

function zTreeOnCheck(event, treeId, treeNode) {
	    if (treeNode) {
			var cityObj = $("#company");
			cityObj.val(treeNode.name);
			companyNode = treeNode.id;
		    //updateDepartmentMenu(treeNode.id);
		    $("#divAround_department").css("background-color","#FFFFFF");
			$("#department").css("background-color","#FFFFFF");	
			//hideMenu();
		}
	}

$("#company").inputStyle({
		operatorId:"companyMenuBtn",
		operatorType:"text",
		operatorText:"选择",
		controllerWidth:200,
		operatorFun:popcd,
		imgFun:clearCompany
	});

function popcd(){
	new DDWin({
		el:'topoDiv'
		,dep:'divAround_company'
		,clickBody:'save'
	})
}
function clearCompany(){
	$("#company").val('');
	$("#divAround_department").css("background-color","#EBEBE4");
	$("#department").css("background-color","#EBEBE4");
	$("#department").val('');
	$("#departmentId").val('');
}

function submitData(){
	if(!$("#form1").valid()){
				return;
	}
	$.ajax({
            url: '<s:url value="/device/save"/>?tdqssid=<%=session.getId()%>',
            type: 'post',
            data: $('#form1').serialize(),
            dataType: 'json',
            timeout: 1000,
            error: function()
            {
            },
            success: function(result)
            {
               reload();
            }
            });
	}
</script>